<template>
  <div class="rule-page common-page">
    <div class="rule-content">
      <span class="title">{{title}}</span>
      <span class="content" v-html="content"></span>
    </div>
  </div>
</template>

<script>
import apBox from "@/common/api/apBox";
import Share from "./mixin/share";
export default {
  name: "Rule",
  components: {
  },
  mixins: [Share],
  data() {
    return {
      title: "",
      content: "",
    };
  },
  created() {
    this.getContent();
    this.setShare();
  },
  mounted() {},
  methods: {
    getContent() {
      this.$toast.loading();
      apBox.getBoxRuleContent().then((data) => {
        this.$toast.clear();
        this.title = data.data.title;
        this.content= data.data.content;
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";

.rule-page {
  background: #fff;

  .rule-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 60px;
    span {
      display: inline-block;
    }

    .title {    
      display: inline-block;
      font-size: 30px;
      font-weight: 500;
      color: #222222;
      line-height: 42px;
      margin-bottom: 20px;
    }

    .content {
      font-size: 26px;
      color: #888888;
      line-height: 40px;
    }
  }
}
</style>
